<template>
  <div class="page">
    <div>
      <h1>商品列表的分页</h1>
      <el-table :data="bannerlist1" style="width: 100%,height: 100%">
        <el-table-column prop="proname" label="商品详情" width="200" />
        <el-table-column label="图片" width="160">
          <template #default="scope">
            <img class="img" :src="scope.row.img1" />
          </template>
        </el-table-column>
        <el-table-column prop="category" label="类别" width="100" />
        <el-table-column prop="originprice" label="原价" width="100" />
        <el-table-column prop="sales" label="售价" width="100" />
        <el-table-column prop="discount" label="折扣" width="100" />
        <el-table-column prop="stock" label="库存" width="100" />
      </el-table>
    </div>

    <el-pagination
      background
      :page-size="params.limitNum"
      :pager-count="10"
      layout="prev, pager, next"
      :total="total"
      @current-change="change"
    />
  </div>
</template>
  
  <script setup lang="ts">
import { reactive, ref } from "vue";
import service from "../../../utils/service";

interface ibanner {
  proname: string;
  img: string;
  category: string;
  originprice: string;
  sales: number;
  discount: number;
  stock: number;
}

let bannerlist1 = reactive<ibanner[]>([]);

const params = reactive<{
  count: number;
  limitNum: number;
}>({
  count: 1,
  limitNum: 10,
});
const total = ref(0);
const getbannerlist1 = () => {
  service({
    url: "/pro/list",
    params,
  }).then((res) => {
    if (res.data.code == "200") {
      bannerlist1.length = 0;
      total.value = res.data.total;
      // console.log(res.data.total);

      bannerlist1.push(...res.data.data);
    }
  });
};

getbannerlist1();

//分页
const change = (value: number) => {
  params.count = value;
  getbannerlist1();
};
</script>
  
  <style scoped>
.img {
  width: 100px;
  height: 100px;
}
.page {
  width: 100%;
  height: 1000px;
}
</style>